<!DOCTYPE HTML>
<html>
<head>
<title>pixi.js example 13 - Graphics</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000000;
}
</style>
<script src="pixi.js"></script>
<script src="../../src/pixi/renderers/WebGLGraphics.js"></script>
<script src="../../src/pixi/renderers/WebGLShaders.js"></script>
<script src="../../src/pixi/renderers/CanvasGraphics.js"></script>
<script src="../../src/pixi/renderers/CanvasRenderer.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderer.js"></script>
<script src="../../src/pixi/renderers/WebGLRenderGroup.js"></script>
<script src="../../src/pixi/primitives/Graphics.js"></script>
</head>
<body>
<script>
// create an new instance of a pixi stage
var stage = new PIXI.Stage(0x000000);
// create a renderer instance
//var renderer = new PIXI.CanvasRenderer(800, 600);//PIXI.autoDetectRenderer(800, 600);
var renderer = PIXI.autoDetectRenderer(800, 600);
// set the canvas width and height to fill the screen
// renderer.view.style.width = window.innerWidth + "px";
//renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
// add render view to DOM
document.body.appendChild(renderer.view);
// OOH! SHINY!
// create two render textures.. these dynamic textures will be used to draw the scene into itself
var graphics = new PIXI.Graphics();
graphics.lineStyle(10, 0x30FF00, 0.5);
graphics.moveTo(50,50);
graphics.lineTo(250, 50);
//graphics.lineTo(100, 100);
graphics.lineTo(250, 220);
graphics.lineTo(50, 220);
graphics.lineTo(150, 50);
graphics.lineStyle(2, 0x30FFFF, 1);
// graphics.beginFill(0xFF794B);
graphics.drawRect(250, 250, 300, 100);
graphics.drawCircle(350, 350,100);
graphics.endFill();
graphics.lineTo(250, 50);
graphics.lineStyle(10, 0xFF0000, 1);
graphics.moveTo(400,400);
graphics.lineTo(550, 50);
graphics.lineStyle(30, 0xFF0000, 1);
graphics.moveTo(400,100);
graphics.lineTo(550, 50);
// graphics.lineTo(92, 20);
//graphics.lineTo(450, 223);
/*
* point1 = new Point(350, 50);
point2 = new Point(100, 100);
point3 = new Point(250, 220);
points = new Vector.<Point>();
points.push(point1, point2, point3, new Point(350, 220), new Point(450, 223));
*/
graphics.lineTo(410,300);
graphics.lineTo(450,320);
graphics.lineTo(570,350);
graphics.lineTo(580,120);
graphics.lineTo(630,120);
var sprite = PIXI.Sprite.fromImage("spinObj_01.png");
stage.addChild(sprite);
stage.addChild(graphics);
requestAnimFrame(animate);
function animate() {
renderer.render(stage);
requestAnimFrame( animate );
}
</script>
</body>
</html>
